<template>
  <div id="discover-music">
    <Tabs :tabList="tabList" @target="target" />
    <!-- 路由入口 -->
    <a-spin :spinning="spinning" tip="努力加载中...">
      <a-icon spin slot="indicator" type="loading" style="font-size: 40px"/>
      <transition name="el-fade-in">
        <!-- <keep-alive> -->
        <router-view></router-view>
        <!-- </keep-alive> -->
      </transition>
    </a-spin>
    <!-- 返回顶部 -->
    <w-go-top ref="goTop" :target="getDOM" />
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { Spin } from 'ant-design-vue';
import Tabs from '@/components/Content/Tabs';
import GoTop from '@/components/Library/GoTop';

export default {
  name: 'DiscoverMusic',

  components: {
    Tabs,
    WGoTop: GoTop,
    ASpin: Spin
  },

  data() {
    return {
      tabList: [{
        tabName: '个性推荐',
        isActive: true,
        id: 'recommendation'
      }, {
        tabName: '歌单',
        isActive: false,
        id: 'songmenu'
      }, {
        tabName: '排行榜',
        isActive: false,
        id: 'ranklist'
      }, {
        tabName: '歌手',
        isActive: false,
        id: 'singer'
      }, {
        tabName: '最新音乐',
        isActive: false,
        id: 'newsongs'
      }]
    };
  },

  created() {
    // 刷新页面时需要根据路由地址重新选中tab的某一项
    const routeName = this.$route.name;
    this.selectTab(routeName);
  },

  mounted() {
    this.$eventBus.$on('goTop', () => {
      // 子组件点击分页需要滚动回顶部
      this.$refs.goTop.goTop();
    });
  },

  beforeDestroy() {
    // 页面销毁前解除事件总线
    this.$eventBus.$off('goTop');
  },

  methods: {
    getDOM() {
      return document.querySelector('.ant-spin-nested-loading');
    },
    // tab切换
    target(name) {
      this.$router.push({
        name
      });
      this.$store.commit('main/SPINNING', true);
    },
    selectTab(rn) {
      this.tabList.map(item => item.isActive = false);
      this.tabList.find(item => item.id === rn).isActive = true;
    }
  },

  computed: {
    ...mapState({
      spinning: state => state.main.spinning
    }),
  },

  watch: {
    '$route.name': {
      // 回退或前进按钮需要tab进行记忆操作
      handler(value) {
        this.selectTab(value);
      }
    }
  }
};
</script>

<style lang="less" scoped>
#discover-music {
  height: 100%;
  .ant-spin-nested-loading {
    height: 88%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 20px;
  }
}
</style>